<template>
  <div class="InspectionTaskAudit">
    <div class="filter">
      <el-form ref="form" label-width="90px">
        <el-form-item label="审核状态:">
          <el-checkbox-group v-model="checkStatus" @change="checkStatusClick">
            <el-checkbox :label="0" name="type" key="0">未审核</el-checkbox>
            <el-checkbox :label="1" name="type" key="1">已审核</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="operation">
          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="taskHistorysParm.startTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="taskHistorysParm.endTime"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd"
              :picker-options="endPickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="getTaskHistorysList()">
            <i class="query-icon"></i>查询
          </el-button>
          <el-button class="but-reset" type="text" size="medium" @click="reset_data()">
            <i class="reset-icon"></i>重置
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-head">任务审核</div>
      <div class="content-list">
        <el-table
          :data="tableData"
          border
          stripe
          size="mini"
          class="el-table-redefine"
          style="width: 100%;"
          height="100%"
          :row-class-name="tableRowClassName"
          @row-dblclick="onRowClick"
        >
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column width="120px" label="审核状态">
            <template slot-scope="scope">
              <span>{{scope.row.checkStatus == 0 ? "未审核" : "已审核"}}</span>
            </template>
          </el-table-column>
          <el-table-column width="250px" prop="task.name" label="任务名称"></el-table-column>
          <el-table-column prop="taskState" label="任务状态">
            <template slot-scope="scope">
              <span
                :style="'color:' + matchArrayContentWithKeyStr( 'color', scope.row.taskStatus, remarks)"
              >{{scope.row ? matchArrayContentStr(scope.row.taskStatus, taskStatus) : "未知"}}</span>
            </template>
          </el-table-column>
          <el-table-column width="160px" prop="createTime" label="开始时间"></el-table-column>
          <el-table-column width="160px" prop="taskEndTime" label="结束时间"></el-table-column>
          <el-table-column prop="pointTotalNum" label="巡检点位总数"></el-table-column>
          <el-table-column prop="normalPointNum" label="正常点位数"></el-table-column>
          <el-table-column prop="alarmPointNum" label="告警点位数"></el-table-column>
          <el-table-column prop="abnormalPointNum" label="识别异常点位数"></el-table-column>
        </el-table>
      </div>
      <div class="pagination-area">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper, slot"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 300]"
          :page-size="taskHistorysParm.size"
          :current-page="taskHistorysParm.page"
          :total="tansksTotal"
        >
          <el-button type="text" size="mini">前往</el-button>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      custom-class="el-dialog-taskReview"
      v-bind="$attrs"
      title="任务审核"
      :visible.sync="dialogVisible"
    >
      <div class="dialog-body">
        <div class="dialog-body-header">
          <div class="item-left">
            <span>审核人：</span>
            <span>{{user_name}}</span>
          </div>
          <div class="item-right">
            <span>审核时间：</span>
            <span>{{taskReviewTime}}</span>
          </div>
        </div>
        <div class="dialog-body-content">
          <div class="content-title">审核意见：</div>
          <el-input
            type="textarea"
            v-model="checkDesc"
            :autosize="{ minRows: 4, maxRows: 6}"
            placeholder="请输入审核意见"
            maxlength="80"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleCloase">取 消</el-button>
        <el-button type="primary" @click="dialogHandleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { taskHistorysList, taskHistoryUpdate } from "@/api/apiManagement";
import { dateToDateStr, getDateTopMonth } from "@/utils/utilsMethod";
import {
  matchArrayContent,
  matchArrayContentWithKey,
  TaskStatus,
  TaskStatusRemarks
} from "@/utils/constant";

export default {
  data() {
    return {
      robot_id: null,
      taskHistorysParm: {
        page: 0,
        size: 20,
        robotId: 1,
        checkStatus: "",
        startTime: "",
        endTime: ""
      },
      checkStatus: [0],
      tableData: [],
      tansksTotal: 0,
      dialogVisible: false,
      checkTaskHistoryId: -1,
      checkDesc: "",
      remarks: TaskStatusRemarks,
      taskStatus: TaskStatus,
      startPickerOptions: {
        disabledDate: time => {
          let endTime =
            this.taskHistorysParm.endTime === null
              ? ""
              : this.taskHistorysParm.endTime;
          return (
            time.getTime() > new Date(endTime).getTime() ||
            time.getTime() > Date.now() - 8.64e6
          );
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let startTime =
            this.taskHistorysParm.startTime === null
              ? ""
              : this.taskHistorysParm.startTime;
          return (
            time.getTime() <
              new Date(startTime).getTime() - 8 * 60 * 60 * 1000 ||
            time.getTime() > Date.now() - 8.64e6
          ); //如果没有后面的-8.64e6就是不可以选择今天的   减去一天的时间代表可以选择同一天
        }
      },

      taskReviewTime: ""
    };
  },
  computed: {
    user_name() {
      return this.$store.getters.userInfo &&
        this.$store.getters.userInfo.account
        ? this.$store.getters.userInfo.account
        : "";
      // return localStorage.getItem("ydRobotUserName");
    }
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    this.taskHistorysParm.robotId = this.robot_id;
    this.taskHistorysParm.startTime = dateToDateStr(
      getDateTopMonth(new Date())
    );
    this.taskHistorysParm.endTime = dateToDateStr(new Date());
    //
    this.getTaskHistorysList();
  },
  mounted() {},
  methods: {
    // 设备类型
    getTaskHistorysList() {
      this.taskHistorysParm.startTime =
        this.taskHistorysParm.startTime == null
          ? ""
          : this.taskHistorysParm.startTime;
      this.taskHistorysParm.endTime =
        this.taskHistorysParm.endTime == null
          ? ""
          : this.taskHistorysParm.endTime.length <= 10 &&
            this.taskHistorysParm.endTime.length != 0
          ? this.taskHistorysParm.endTime + " 24:00:00"
          : this.taskHistorysParm.endTime;
      if (this.checkStatus.length > 1) {
        this.taskHistorysParm.checkStatus = "";
      } else if (this.checkStatus.length == 1) {
        this.taskHistorysParm.checkStatus = this.checkStatus[0];
      }
      var parm = {
        page: this.taskHistorysParm.page,
        size: this.taskHistorysParm.size,
        robotId: this.taskHistorysParm.robotId,
        startTime: this.taskHistorysParm.startTime,
        endTime: this.taskHistorysParm.endTime,
        checkStatus: this.taskHistorysParm.checkStatus
      };
      taskHistorysList(parm)
        .then(response => {
          if (response) {
            this.tableData = response.list;
            this.tansksTotal = response.total;
          }
        })
        .catch(() => {});
    },
    // 更新审核意见
    updateTaskHistory() {
      taskHistoryUpdate({ checkDesc: this.checkDesc }, this.checkTaskHistoryId)
        .then(response => {
          this.dialogVisible = false;
          this.checkDesc = "";
          this.getTaskHistorysList();
        })
        .catch(() => {});
    },
    handleSizeChange(val) {
      this.taskHistorysParm.size = val;
      this.getTaskHistorysList();
    },
    handleCurrentChange(val) {
      this.taskHistorysParm.page = val;
      this.getTaskHistorysList();
    },
    getTaskStatusString(val) {
      let str = "未知";
      switch (parseInt(val)) {
        case 0:
          str = "已执行";
          break;
        case 1:
          str = "终止";
          break;
        case 2:
          str = "暂停";
          break;
        case 3:
          str = "正在执行";
          break;
        case 4:
          str = "未执行";
          break;
        case 5:
          str = "超期";
          break;
        // case 6:
        //   str = "任务失败";
        //   break;
        case 7:
          str = "超时";
          break;
        case 8:
          str = "暂停";
          break;
      }
      return str;
    },
    checkStatusClick(val) {
      // if (this.checkStatus.length <= 0 || this.checkStatus.length == 2) {
      //   this.taskHistorysParm.checkStatus = "";
      // } else {
      //   this.taskHistorysParm.checkStatus = this.checkStatus.join(",");
      // }
    },
    reset_data() {
      this.taskHistorysParm.page = 0;
      this.taskHistorysParm.size = 20;
      this.taskHistorysParm.startTime = dateToDateStr(
        getDateTopMonth(new Date())
      );
      this.taskHistorysParm.endTime = dateToDateStr(new Date());
      this.taskHistorysParm.checkStatus = "";
      this.checkStatus = [0];
      this.getTaskHistorysList();
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    onRowClick(row, column, event) {
      if (
        (row.taskStatus === 0 ||
          row.taskStatus === 1 ||
          row.taskStatus === 7) &&
        row.pointCheckStatus === 0
      ) {
        this.checkDesc = row.checkDesc;
        this.dialogVisible = true;

        var today = new Date(), //获取当前日期
          y = today.getFullYear(), //获取日期中的年份
          m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
          d = today.getDate(); //获取日期中的日(方便在建立日期表格时高亮显示当天)
        this.taskReviewTime = y + "-" + (m + 1) + "-" + d;

        this.checkTaskHistoryId = row.id;
      } else {
        if (row.pointCheckStatus === 1) {
          this.$router.push({
            path: "/resultsConfirm/inspection-results-browse",
            query: { taskHistoryId: row.id, showReturn: true }
          });
        } else if (row.pointCheckStatus === 2) {
          this.$router.push({
            path: "/resultsConfirm/alarm-query",
            query: { taskHistoryId: row.id, showReturn: true }
          });
        } else {
          this.$router.push({
            path: "/resultsConfirm/inspection-results-browse",
            query: { taskHistoryId: row.id, showReturn: true }
          });
        }
      }
    },
    // 匹配类型返回
    matchArrayContentStr(val, array) {
      return matchArrayContent(val, array);
    },
    // 匹配类型返回
    matchArrayContentWithKeyStr(key, val, array) {
      return matchArrayContentWithKey(key, val, array);
    },
    dialogHandleCloase() {
      this.dialogVisible = false;
      this.checkDesc = "";
    },
    dialogHandleConfirm() {
      this.updateTaskHistory();
    }
  }
};
</script>

<style>
.InspectionTaskAudit .filter .el-form-item {
  margin-top: 0;
  margin-bottom: 3px;
}
.InspectionTaskAudit .filter .el-form-item__label {
  font-size: 13px;
  line-height: 26px;
}
.InspectionTaskAudit .filter .el-form-item__content {
  font-size: 13px;
  line-height: 26px;
}
.InspectionTaskAudit .filter .el-checkbox {
  font-size: 13px;
}
.InspectionTaskAudit .filter .el-checkbox__label {
  font-size: 13px;
}
.InspectionTaskAudit .filter .el-checkbox {
  width: 100px;
  margin-left: 10px;
}
.InspectionTaskAudit .filter .el-checkbox + .el-checkbox {
  margin-left: 10px;
}
/*  */

.InspectionTaskAudit {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
.InspectionTaskAudit .filter {
  position: relative;
  width: 100%;
  /* height: auto; */
  height: 65px;
  background-color: #eeeeee;
}
.InspectionTaskAudit .operation {
  width: 100%;
  height: 30px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
  border-top: 1px solid rgb(202, 231, 238);
}

.InspectionTaskAudit .operation .el-form-item {
  margin-top: 1px;
  margin-bottom: 0;
  float: left;
}
.InspectionTaskAudit .operation .el-form-item__content {
  width: 200px;
  margin-left: 5px !important;
}
.InspectionTaskAudit .operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.InspectionTaskAudit .operation .el-date-editor.el-input {
  width: 200px;
}
.InspectionTaskAudit .operation .el-input__inner {
  height: 26px;
  line-height: 26px;
}
.InspectionTaskAudit .operation .el-input__icon {
  line-height: 26px;
}
.InspectionTaskAudit .but-query,
.InspectionTaskAudit .but-reset {
  height: 30px;
  margin-left: 20px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.InspectionTaskAudit .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.InspectionTaskAudit .reset-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%;
  float: left;
}

.InspectionTaskAudit .content {
  position: relative;
  width: 100%;
  flex-grow: 1;
}
.InspectionTaskAudit .content-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}

.InspectionTaskAudit .content-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 59px);
  /* overflow: auto; */
}

.InspectionTaskAudit .el-table-redefine {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-flow: column; */
}

.InspectionTaskAudit .el-table-redefine .el-table__body-wrapper {
  /* overflow: hidden;
  overflow-y: auto;
  flex-grow: 1; */
}

.InspectionTaskAudit .pagination-area {
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0px;
  background-color: #eeeeee;
}

.InspectionTaskAudit .el-dialog-taskReview {
  background-color: rgb(215, 239, 236);
  width: 46%;
  min-width: 575px;
  padding-bottom: 2px;
}
.InspectionTaskAudit .el-dialog-taskReview .el-dialog__header {
  padding: 0px 5px;
}
.InspectionTaskAudit
  .el-dialog-taskReview
  .el-dialog__header
  .el-dialog__title {
  font-size: 13px;
}
.InspectionTaskAudit .el-dialog-taskReview .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.InspectionTaskAudit .el-dialog__body {
  border-top: 1px solid #90e8c6;
  border-left: 1px solid #90e8c6;
  border-right: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.InspectionTaskAudit .el-dialog-taskReview .dialog-body {
  overflow: auto;
  height: 280px;
  color: black;
  font-size: 13px;
}
.InspectionTaskAudit .dialog-body-header {
  width: 100%;
  margin-top: 50px;
  overflow: hidden;
}
.InspectionTaskAudit .dialog-body-header .item-left {
  margin-left: 10%;
  margin-right: 90px;
  float: left;
}
.InspectionTaskAudit .dialog-body-header .item-left span {
  margin-right: 9px;
}
.InspectionTaskAudit .dialog-body-header .item-right {
  float: left;
}
.InspectionTaskAudit .dialog-body-header span + span {
  width: 120px;
  text-align: left;
  display: inline-block;
  border: solid 1px #90e8c6;
  border-radius: 2px;
  padding: 3px;
  color: #bbb;
}
.InspectionTaskAudit .dialog-body-content {
  margin-top: 50px;
  width: 100%;
  overflow: hidden;
}
.InspectionTaskAudit .dialog-body-content .content-title {
  margin-left: 10%;
  line-height: 90px;
  height: 100px;
  float: left;
}
.InspectionTaskAudit .dialog-body-content .el-textarea {
  float: left;
  width: 408px;
  height: 100px;
}
.InspectionTaskAudit .el-textarea .el-textarea__inner {
  border: solid 1px #90e8c6;
}
.InspectionTaskAudit .el-dialog-taskReview .el-dialog__footer {
  padding: 0px;
  margin: 5px;
  margin-top: 0px;
  border: 1px solid #90e8c6;
  padding-bottom: 10px;
  background: white;
}
.InspectionTaskAudit .el-dialog-taskReview .el-dialog__footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
  margin-right: 10px;
  margin-left: 0px;
}
</style>